<template>
  <el-menu v-loading="loading" :default-active="router.options.history.location" @select="handleSelect"
    background-color="#0b62a7" text-color="white" :unique-opened="true" router>
    <!-- <template v-for="item in mainObj.menus">
      <el-sub-menu v-if="item.children && item.children.length > 0" :index="item.id" :key="item.id">
        <template #title>
          <el-icon><component :is="item.icon"></component></el-icon>
          {{ item.name}}
        </template>
        <el-menu-item v-for="child in item.children" :index="child.route" :key="child.id">
          <template #title>
            <el-icon><component :is="child.icon"></component></el-icon>
            {{ child.name}}
          </template></el-menu-item>
      </el-sub-menu>
      <el-menu-item v-else :index="item.path" :key="item.id">{{ item.name}}</el-menu-item>
    </template> -->
    <template v-for="item in mainObj.menus[0].children">
      <el-sub-menu v-if="(item as any).children && (item as any).children.length > 0" :index="(item as any).id"
        :key="(item as any).id">
        <template #title>
          <el-icon>
            <component :is="(item as any).icon" />
          </el-icon>
          {{ (item as any).title }}
        </template>
        <el-menu-item v-for="child in (item as any).children" :index="child.route" :key="child.id">
          <el-icon>
            <component :is="(item as any).icon" />
          </el-icon>
          {{ child.title }}
        </el-menu-item>
      </el-sub-menu>
      <el-menu-item v-else :index="(item as any).id" :key="(item as any).id + '-else'">
        <el-icon>
          <component :is="(item as any).icon" />
        </el-icon>
        {{ (item as any).title }}
      </el-menu-item>
    </template>
  </el-menu>
</template>

<script lang="ts" setup>
import { TeacherInfo } from "@/stores/counter";
const userStore= TeacherInfo();
import {
  Document,
  Menu as IconMenu,
  Location,
  Setting,
} from '@element-plus/icons-vue'
import {onMounted,reactive,ref,nextTick} from "vue";
import api from "@/api/Menu";
import {useRouter} from 'vue-router';
const router = useRouter();

let activeIndex=ref("");
const handleOpen = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
const loading =ref(false);
var mainObj = reactive({
  menus: [{
    children: [],
    icon: "el-icon-eleme",
    id : "",
    name :"",
    pid :null,
    path : "#"}
  ],
});
function handleSelect(data: any) {
  activeIndex.value=data;
}
const handleClose = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
const  loadData = async () => { {
  mainObj.menus[0].children = await api.findMenus(userStore.teacherinfo.teacherName);

}}


onMounted(() => {
  nextTick(()=>{

    loadData();
  })
  // 获取存储的字符串并解析为 JavaScript 对象
  // userStore.teacherinfo.teacherName = JSON.parse(localStorage.getItem("token")).teacherName;
 
  })
</script>

<style scoped>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}
.el-menu-vertical-demo:not(.el-menu--collapse){
  width:100%
}
:deep(.el-menu-item.is-active) {
  background-color: #094e86;
}
</style>
